<!DOCTYPE html>
<html>
<head>
<meta charset='UTF-8'>
<title>
JS 鼠标事件---极简练习
</title>
<style>
  .puzzle {color: purple;}
  span {color: red;
  border: solid 1px;}
</style>
<script type='text/javascript'>
// nothing
</script>
</head>
<body>
<h1>谜语</h1>
<div class='puzzle'>
  谜面：什么东西早晨用四条腿走路,中午用两条腿走路,晚上用三条腿走路?
</div>
谜底：<span>点击这里，查看答案</span>

<script type='text/javascript'>

  var b = document.body
  spans = b.getElementsByTagName('span')
  var span = spans[0]  // 获取唯一的span
  flag = false // 是否揭示答案
  text = "点击这里，查看答案" // 原来的文本
  function discover(){
    // 单数点击揭示答案，双数点击隐藏答案
    if (! flag){
  span.innerText = "人" // 重新设置span中的文本
  flag = true
}
else {
  span.innerText = text // 重新设置成原来的文本，隐藏答案
  flag = false;
}
  }
  span.onclick = discover
  </script>

</body>
</html>
